<template>
  <div class="home">
    <!-- 轮播图 -->
    <swiper :options="swiperOption">
      <swiper-slide class="swiper">
        <div class="box">
          <p>
            <span class="span1">ICBMLE</span><br />
            <span class="span2">2022</span>
          </p>
        </div>
        <span class="i"
          >大数据, 机器学习与电子商务国际会议（ICBMLE 2022） 2022 International
          Conference on Big Data, Machine Learning and E-commerce</span
        >
        <div class="time">
          February. 26--27, 2022 | Guangzhou,China<br />2022年2月26-27 | 中国广州
        </div>
        <img src="../assets/lb3.png" />
      </swiper-slide>
      <swiper-slide class="swiper">
       <div class="box">
          <p>
            <span class="span1">ICBMLE</span><br />
            <span class="span2">2022</span>
          </p>
        </div>
        <span class="i"
          >大数据, 机器学习与电子商务国际会议（ICBMLE 2022） 2022 International
          Conference on Big Data, Machine Learning and E-commerce</span
        >
        <div class="time">
          February. 26--27, 2022 | Guangzhou,China<br />2022年2月26-27 | 中国广州
        </div>
        <img src="../assets/lb2.png" />
      </swiper-slide>
      <swiper-slide class="swiper">
        <div class="box">
          <p>
            <span class="span1">ICBMLE</span><br />
            <span class="span2">2022</span>
          </p>
        </div>
        <span class="i"
          >大数据, 机器学习与电子商务国际会议（ICBMLE 2022） 2022 International
          Conference on Big Data, Machine Learning and E-commerce</span
        >
        <div class="time">
          February. 26--27, 2022 | Guangzhou,China<br />2022年2月26-27 | 中国广州
        </div>
        <img src="../assets/lb.png" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="main wrap">
      <h1>Welcome to ICBMLE 2022</h1>
      <div class="line"></div>
      <p class="p1">
        Conference Date: February 26-27, 2021<br />

        Conference Venue: Guangzhou, China<br />

        Submission Deadline: <strong>February 25, 2022</strong><br />

        Submitted to these Indexers: EI ,Scopus,CPCIT
      </p>
      <p class="p2">
        As a leading role in the global megatrend of scientific innovation,
        China has been creating a more and more open environment for scientific
        innovation, increasing the depth and breadth of academic cooperation,
        and building a community of innovation that benefits all. These
        endeavors have made new contribution to globalization and creating a
        community of shared future.
      </p>
      <p class="p3">
        <strong
          >The 2022 International Conference on Internet of Things, Automation
          and Artificial Intelligence（ICBMLE 2022)</strong
        >
        will be organized
        <strong
          >as a parallel session of the
          <i
            >2022 2rd International Academic Exchange Conference on Science and
            Technology Innovation (ICBMLE 2022).</i
          >
        </strong>
        The conference will be hosted by AEIC Academic Exchange Information
        Centre. We warmly welcome previous and prospected authors submit your
        new research papers ICBMLE 2022 and share the valuable experiences
        with scientists and scholars around the world.
      </p>
      <p class="p4">
        To adapt to this changing world and China's fast development in this new
        era,
        <strong
          >the 2022 International Conference on Internet of Things, Automation
          and Artificial Intelligence（ICBMLE 2022) is to be held on February
          26-27, 2022 in Guangzhou.</strong
        >
        Organized jointly by over ten universities and academic societies, this
        conference takes “bringing together global wisdom in scientific
        innovation to promote high-quality development” as the theme. This
        conference aims to boost development of the Greater Bay Area, expand
        channels of international academic exchange in science and technology,
        build a sharing platform of academic resources, promote scientific
        innovation on the global scale, improve academic cooperation between
        China and the outside world. It also aims to encourage the exchange of
        information on research frontiers in different fields, connect the most
        advanced academic resources in China and abroad, turn research results
        into industrial solutions, bring together talents, technologies and
        capital to boost development.
      </p>
      <h1>Conference Proceedings</h1>
      <div class="line"></div>
      <p class="p1">
        All submissions of ICBMLE 2022 will be peer-reviewed by 2-3 experts.
        Accepted papers after proper registration and presentation will be
        published as an individual chapter in ICBMLE 2022, which will be
        archived in the IEEE Xplore, and indexed by EI Compendex, Scopus, etc.
      </p>
      <!-- <img src="../assets/ie.png" width="540" height="306" /> -->
      <h1>Organizer</h1>
      <div class="line"></div>
      <p class="p1">
        <strong
          ><span>Sponsors</span> <br />
          IEEE PES Smart Buildings-Loads-Customer Systems Technical Committee
          (China)<br />

          South China University of Technology<br />

          Chongqing University
        </strong>
      </p>
      <p class="p1">
        <strong
          ><span>Organized by</span><br />
          IEEE PES SBLC Sub-committee of Smart Park<br />

          Beijing Smart Tech Information Technology Co., Ltd<br />

          Academic Exchange Information Centre (AEIC)
        </strong>
      </p>
      <img src="../assets/dx1.png" class="im" />
      <img src="../assets/dx2.gif" class="im" />
      <img src="../assets/成都.jpg" class="im" />
      <h1>Venue</h1>
      <div class="line"></div>
      <baidu-map
        :center="center"
        :zoom="zoom"
        @ready="handler"
        @click="getClickInfo"
        :scroll-wheel-zoom="true"
        class="baidu"
      >
      </baidu-map>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'work',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOption: {
        autoplay: {
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          delay: 5000 // 自动切换的时间间隔（单位ms）
        },
        initialSlide: 0,
        loop: true,
        pagination: { el: '.swiper-pagination' }, // 分页按钮
        paginationClickable: true
      },
      center: { lng: 113.293163, lat: 23.142398 },
      zoom: 13
    }
  },
  methods: {
    handler ({ BMap, map }) {
      var point = new BMap.Point(113.293163, 23.142398)
      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, {
        strokeColor: 'Red',
        strokeWeight: 6,
        strokeOpacity: 1,
        Color: 'Red',
        fillColor: '#f03'
      })
      map.addOverlay(circle)
    },
    getClickInfo (e) {
      // console.log(e.point.lng)
      // console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
  }
}
</script>

<style scoped>
/* 轮播图 */
.swiper {
  width: 1500px;
  height: 480px;
  position: relative;
  margin-top: 120px;
}

.swiper img {
  width: 100%;
  height: 480px;
}

.swiper .i {
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 150px;
  color: azure;
  font-size: 25px;
  text-align: center;
  font-weight: 700;
  line-height: 36px;
  transform: translate(-50%, 0);
}

.swiper .box {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 140px;
  height: 105px;
  padding: 5px;
  border: 3px solid #ccc;
  border-radius: 10px;
  transform: translate(0, 50%);
  margin-left: -60px;
}

.swiper .box p {
  height: 100%;
  text-align: center;
  background-color: #e8e8e8;
  box-sizing: border-box;
}

.swiper .box p .span1 {
  display: inline-block;
  font-size: 33px;
  font-weight: 700;
  margin-top: 25px;
}

.swiper .box p .span2 {
  font-size: 25px;
  font-weight: 700;
}

.swiper .time {
  position: absolute;
  bottom: 13%;
  left: 50%;
  width: 395px;
  height: 70px;
  text-align: center;
  font-size: 16px;
  background-color: #e8e8e8;
  border: 3px solid #000;
  border-radius: 35px;
  padding-top: 8px;
  box-sizing: border-box;
  margin-left: -197.5px;
}

.main {
  margin-top: 20px;
  font-size: 12px;
}

.main h1 {
  font-size: 22px;
}

.line {
  height: 1px;
  width: 100px;
  margin-top: 10px;
  border-bottom: 2px solid blue;
}

.main .p1 {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 30px;
  line-height: 30px;
  font-size: 14px;
}

.main .p1 span {
  font-size: 20px;
  color: #4f81bd;
}

.main .p2 {
  margin-bottom: 20px;
  margin-left: 30px;
  line-height: 30px;
  font-size: 14px;
}

.main .p3 {
  margin-bottom: 20px;
  margin-left: 30px;
  line-height: 30px;
  font-size: 14px;
}

.main .p3 i {
  font-style: normal;
  color: #366092;
}

.main .p4 {
  margin-bottom: 30px;
  margin-left: 30px;
  line-height: 30px;
  font-size: 14px;
}

.main img {
  margin-left: 30px;
  margin-bottom: 30px;
}

.baidu {
  width: 1000px;
  height: 300px;
  margin-top: 20px;
}

.im {
  width: 150px;
  height: 150px;
}
</style>
